{% extends 'basic/component.html' %}
{% load i18n %}
{% load static %}

{% block pageTitle %}
my scources-tasks page
{% endblock %}


{% block pageHeadExtra %}
    <link href="{% static 'css/accounts/my_data.css' %}" rel="stylesheet">
{% endblock %}


{% block pageBody %}
<div class="container">
{#    <div class="title">#}
{#        <div class="row top">#}
{#            <div class="col-md-4">#}
{#            </div>#}
{#            <div class="col-md-4">#}
{#                <div class="self_img">#}
{#                    <img src="{{ request.user.get_normal_avatar_uri }}"#}
{#                         class="avatar img-circle img-responsive" alt="{{ request.user.username }}">#}
{#                </div>#}
{#            </div>#}
{#            <div class="col-md-4">#}
{#            </div>#}
{#        </div>#}
{#        <div class="row bottom">#}
{#            <div class="col-md-4">#}
{#            </div>#}
{#            <div class="col-md-4">#}
{#                <div class="self_name">#}
{#                    <p>{{ request.user.username }}</p>#}
{#                </div>#}
{#            </div>#}
{#            <div class="col-md-4">#}
{#            </div>#}
{#        </div>#}
{#    </div>#}
{#    <span class="self_span"></span>#}
    <div class="content">
        <div class="row">
            <div class="col-md-2">
                <ul class="nav nav-pills nav-stacked">
                    <li>
                        <a href="{% url 'storage:my_template' %}" style="font-size: 18px;"><i class="fa fa-navicon" aria-hidden="true"></i>&nbsp;&nbsp;My datas</a>
                    </li>
                    <li class="active">
                        <a href="#mytask" class="collapsed" data-toggle="collapse" data-target="#task-navbar"
                           style="background-color: #101010;font-size: 18px;"><i class="fa fa-navicon" aria-hidden="true"></i>&nbsp;&nbsp;My tasks</a>
                        <ul id="task-navbar" class="nav nav-pills nav-stacked collapse in self-nav">
                            <li class="active"><a href="#task-all" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;all</a></li>
                            <li><a href="#task-unsubmit" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;unsubmit</a></li>
                            <li><a href="#task-running" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;running</a></li>
                            <li><a href="#task-completed" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;completed</a></li>
                            <li><a href="#task-failed" data-toggle="tab">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;failed</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
            <div class="col-md-10">
                <div class="profile-content">
                <div class="tab-content">
                    <div class="tab-pane active" id="task-all">
                        1
                    </div>

                    <div class="tab-pane" id="task-unsubmit">
                        2
                    </div>

                    <div class="tab-pane" id="task-running">
                        3
                    </div>

                    <div class="tab-pane" id="task-completed">
                        4
                    </div>

                    <div class="tab-pane" id="task-failed">
                        5
                    </div>

                </div>{# tab-content #}
                </div>{# profile-content #}
            </div>{# col-9 #}
        </div>{# content row #}
    </div>{# content #}

</div>{# container #}
{% endblock %}


{% block pageFootExtra %}
{#    <script src="{% static 'js/accounts/my_data.js' %}"></script>#}
    <script src="{% static 'js/vendor/bootstrap-paginator.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.min.js' %}"></script>
    <script src="{% static 'js/vendor/formValidation.bootstrap.min.js' %}"></script>
    <link href="https://cdn.bootcss.com/croppie/2.5.1/croppie.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/croppie/2.5.1/croppie.min.js"></script>
{% endblock %}
